<template>
	<div class="edit-popup">
		<popup ref="popupRef" :title="popupTitle" :async="true" width="1350px" :clickModalClose="true"
			@confirm="handleSubmit" @close="handleClose">
			<div class="bor">
				<el-form ref="formRef" :model="formData" label-width="145px" label-position="right" :rules="formRules">
					<el-row>
						<el-col :span="options.span">
							<el-form-item label="名称" prop="title">
								<el-input v-model="formData.title" placeholder="请输入物料名称" size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="分类" prop="category_id">
								<el-tree-select class="flex-1" check-strictly :default-expand-all="true"
									v-model="formData.category_id" @change="onTrees" :data="options.jobss"
									:props="{ value: 'id', label: 'name'}" node-key="id" size="small"
									:disabled="formData.category_lock==1?true:false">
								</el-tree-select>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="单位" required>
								<el-col :span="10" v-if="formData.category_id==15" style="border: none;">
									<el-form-item prop="unit_id_15">
										<el-select class="flex-1" v-model="formData.unit_id_15" placeholder="请选择计量单位"
											size="small">
											<el-option v-for="(item, index) in options.jobs" :key="index"
												:label="item.title" :value="item.nid"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="formData.category_id==15?11:24" style="border: none;">
									<el-form-item prop="unit_id">
										<el-select class="flex-1" v-model="formData.unit_id" placeholder="请选择计量单位"
											size="small">
											<el-option v-for="(item, index) in options.jobs" :key="index"
												:label="item.title" :value="item.nid"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-tooltip v-if="formData.category_id==15" class="box-item" effect="dark"
									content="单位规则: 左侧为计量单位，右侧为包装单位，例电缆：米/捆" placement="top">
									<el-icon :size="16" :color="'#BDBDBD'">
										<QuestionFilled />
									</el-icon>
								</el-tooltip>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="规格" prop="spec">
								<el-input v-model="formData.spec" :disabled="formData.root == 1" placeholder="请输入规格"
									size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="型号" prop="model">
								<el-input v-model="formData.model" :disabled="formData.root == 1" placeholder="请输入物料型号"
									size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="属性一" prop="alias">
								<el-input v-model="formData.alias" :disabled="formData.root == 1" placeholder="请输入属性一"
									size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="属性二" prop="other">
								<el-input v-model="formData.other" :disabled="formData.root == 1" placeholder="请输入属性二"
									size="small">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="options.span">
							<el-form-item label="从属设备" prop="slave">
								<el-input v-model="formData.slave_name" placeholder="请输入从属设备" @click="onblurinput"
									size="small" clearable>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<collapse :name="'展开更多'" :names="'收起更多'" :showMain="showMain"
								@handleChangeCollapse="handleChangeCollapse">
								<template #mains>
									<el-row>
										<el-col :span="options.span">
											<el-form-item label="生产厂家" prop="manufacturer">
												<el-input v-model="formData.manufacturer" placeholder="请输入生产厂家"
													size="small">
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="出厂日期" prop="date_production">
												<el-date-picker class="w-60" v-model="formData.date_production"
													format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date"
													placeholder="请输入出厂日期" size="small" />
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="特种设备注册代码编号" prop="registration_code">
												<el-input v-if="formData.category_id==4"
													v-model="formData.registration_code"
													@blur="onregistration_code(2,formData.registration_code)"
													placeholder="请输入特种设备注册代码编号" size="small">
												</el-input>
												<el-input v-else v-model="formData.registration_code"
													format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请输入登记牌证号"
													size="small">
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="登记牌证号" prop="registration_no">
												<el-input v-if="formData.category_id==4"
													v-model="formData.registration_no"
													@blur="onregistration_code(1,formData.registration_no)"
													format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="请输入登记牌证号"
													size="small">
												</el-input>
												<el-input v-else v-model="formData.registration_no" format="YYYY/MM/DD"
													value-format="YYYY-MM-DD" placeholder="请输入登记牌证号" size="small">
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="特种设备制造许可证号" prop="license_key">
												<el-input v-model="formData.license_key" placeholder="请输入特种设备制造制造许可证号"
													size="small">
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="检验起始日期" prop="inspection_start_date">
												<el-date-picker v-model="formData.inspection_start_date"
													format="YYYY/MM/DD" value-format="YYYY-MM-DD" type="date"
													placeholder="请输入检验起始日期" size="small" />
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="检验周期" prop="inspection_cycle">
												<el-select class="flex-1" v-model="formData.inspection_cycle"
													placeholder="请输入检验周期" size="small">
													<el-option v-for="(item, index) in options.jczq" :key="index"
														:label="item.name" :value="item.value"></el-option>
												</el-select>
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="登记牌证时间" prop="registration_date">
												<el-date-picker v-model="formData.registration_date" format="YYYY/MM/DD"
													value-format="YYYY-MM-DD" type="date" placeholder="请输入登记牌证号时间"
													size="small" />
											</el-form-item>
										</el-col>

										<el-col :span="options.span">
											<el-form-item label="产品合格证编号" prop="product_no">
												<el-input v-model="formData.product_no" placeholder="请输入产品合格证编号"
													size="small">
												</el-input>
											</el-form-item>
										</el-col>
										<el-col :span="options.span">
											<el-form-item label="准用期限" prop="service_life">
												<el-date-picker v-model="formData.service_life" format="YYYY/MM/DD"
													value-format="YYYY-MM-DD" type="date" placeholder="请输入准用期限"
													size="small" />
											</el-form-item>
										</el-col>
										<el-col :span="options.span"></el-col>
										<el-col :span="options.span"></el-col>
									</el-row>
								</template>
							</collapse>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" style="border-right:0;">
							<el-form-item label="上传图片">
								<div>
									<div class="flex">
										<material-picker v-model="formData.certificate_image" :limit="99" />
										<div class="font-t">建议尺寸：100*100px，支持jpg，jpeg，png格式</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" style="border-right:0;">
							<el-form-item label="上传附件">
								<div>
									<div class="flex">
										<material-picker v-model="formData.product_image" :typeshow="true" :img="false"
											:limit="99" />
										<div class="font-t">建议格式：pdf，doc，docx，ppt，xls，xlsx，zip，rar</div>
									</div>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24" style="border-right:0;">
							<el-form-item label="备注" prop="remark">
								<el-input v-model="formData.remark" type="textarea" placeholder="请输入备注" size="small"
									autosize>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div class="bors">

				</div>
			</div>
		</popup>
		<mtable v-if="showtable" ref="editRefs" @success="onsuccess" @close="showtable = false"></mtable>
	</div>
</template>
<script lang="ts" setup>
	import type {
		FormInstance
	} from 'element-plus'
	import feedback from '@/utils/feedback'
	import Popup from '@/components/popup/index.vue'
	import collapse from '@/components/collapse/index.vue'
	import mtable from './table.vue'
	import {
		adminListsing,
		adminAdd,
		adminEdit
	} from '@/api/materials/product'
	import {
		adminLists
	} from '@/api/unit/list'
	import {
		adminListssmaterials
	} from '@/api/materials/list'
	import {
		adminAll,
		adminlistAll
	} from '@/api/materials/product'
	const showtable = ref(false)
	const emit = defineEmits(['success', 'close'])
	const formRef = shallowRef < FormInstance > ()
	const popupRef = shallowRef < InstanceType < typeof Popup >> ()
	const editRefs = shallowRef < InstanceType < typeof Popup >> ()
	const mode = ref('add')
	const popupTitle = computed(() => {
		return mode.value == 'edit' ? '编辑详情' : '新增物料'
	})
	const formData = reactive({
		id: '',
		title: '',
		category_lock: '',
		category_id: '',
		product_id: '',
		spec: '',
		other: '',
		model: '',
		alias: '',
		slave: '',
		slave_name: '',
		unit_id: '',
		unit_id_15: '',
		manufacturer: '',
		date_production: '',
		registration_no: '',
		registration_date: '',
		product_no: '',
		license_key: '',
		registration_code: '',
		inspection_start_date: '',
		inspection_cycle: '',
		certificate_image: [],
		product_image: [],
		remark: '',
		service_life: '',
		product_image_name: []
	})

	const formRules = reactive({
		title: [{
			required: true,
			message: '请输入物料名称',
			trigger: ['blur']
		}],
		category_id: [{
			required: true,
			message: '请选择物料分类',
			trigger: ['change']
		}],
		unit_id: [{
			required: true,
			message: '请选择计量单位',
			trigger: ['change']
		}],
		unit_id_15: [{
			required: true,
			message: '请选择计量单位',
			trigger: ['change']
		}]
	})
	const options = reactive({
		role: [] as any[],
		dept: [] as any[],
		jobs: [] as any[],
		jobss: [] as any[],
		jczq: [] as any[],
		span: 6
	})
	const showMain = ref(false)
	const handleChangeCollapse = () => {
		showMain.value = !showMain.value
	}
	const onTrees = (val: any) => {
		if (val == 4) {
			showMain.value = true
		} else {
			showMain.value = false
		}
		formData.registration_code = ''
		formData.registration_no = ''
	}
	const onblurinput = async () => {
		showtable.value = true
		await nextTick()
		editRefs.value?.open('add')
	}
	const onsuccess = (val: any) => {
		if (val.id) {
			formData.slave = val.id
			formData.slave_name = val.title
		}
	}
	const onregistration_code = (type: any, val: any) => {
		if (type == 1 && val) {
			adminListsing({
				product_id: formData.product_id || '',
				registration_no: val
			}).then((data: any) => {
				if (data.count != 0) {
					formData.registration_no = ''
					feedback.msgError(`登记牌证号不能相同`)
				}
			})
		} else if (type == 2 && val) {
			adminListsing({
				product_id: formData.product_id || '',
				registration_code: val
			}).then((data: any) => {
				if (data.count != 0) {
					formData.registration_code = ''
					feedback.msgError(`特种设备注册代码编号不能相同`)
				}
			})
		}

	}

	const getOptions = () => {
		adminlistAll({
			page_type: 0
		}).then((data: any) => {
			options.jczq = data.jczq
		})
		adminAll({
			page_type: 0
		}).then((data: any) => {
			options.dept = data
		})
		adminListssmaterials({
			page_type: 0
		}).then((data: any) => {
			options.jobss = data
		})
		adminLists({
			page_type: 0
		}).then((data: any) => {
			options.jobs = data.lists
		})
	}

	const handleSubmit = async () => {
		await formRef.value?.validate()
		if (formData.slave_name == '') {
			formData.slave = ''
		}
		mode.value == 'edit' ? await adminEdit(formData) : await adminAdd(formData)
		popupRef.value?.close()
		emit('success')
	}

	const open = (type = 'add') => {
		mode.value = type
		popupRef.value?.open()
	}
	watch(() => formData.category_id, (newValue: any) => {
		if (newValue.category_id) {
			if (newValue.category_id != 15) {
				formData.unit_id_15 = ''
			}
		}

	}, {
		deep: true
	})

	const setFormData = (data: Record < any, any > ) => {
		for (const key in formData) {
			if (data[key] != null && data[key] != undefined) {
				//@ts-ignore
				formData[key] = data[key]
			}
		}
		if (formData.category_id == 4) {
			showMain.value = true
		}
	}

	const handleClose = () => {
		emit('close')
	}

	getOptions()
	defineExpose({
		open,
		setFormData
	})
</script>
<style lang="scss" scoped>
	$bor-color:#eeeff0;

	.el-col {
		border-right: 1px solid $bor-color;
		border-top: 1px solid $bor-color;
		align-items: center;
		padding: 2px;

		&:nth-child(4n) {
			border-right: 0;
		}
	}

	.el-form-item {
		margin-bottom: 0;
	}

	::v-deep .el-form-item__label {
		border-left: 0;
		border-top: 0;
		border-bottom: 0;
		margin-right: 10px;
	}

	.bor {
		border-right: 1px solid $bor-color;
		border-left: 1px solid $bor-color;
		border-bottom: 1px solid $bor-color;

		.bor-title {
			width: 100%;
			height: 40px;
			padding: 10px;
			background-color: #F8F8F8;
		}
	}

	.bors {
		border-bottom: 1px solid rgba($bor-color, 0.5);
	}

	::v-deep .el-form-item__error {
		z-index: 10;
	}
</style>
